<template>
	<view class="wrap">
		<cu-custom isBack="false" textColor='#333333' fhColor='#333333'>
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">购物车({{gwcList.length}})</block>
		</cu-custom>
		<!-- 背景 -->
		<view class="bj" :style="{backgroundImage:'url('+imgUrl+'bac.png'+')'}">
		</view>
		<!-- 购物车内容 -->
		<scroll-view class="container" scroll-y="true" :style="{height:height-CustomBar-10+'px'}">
			<view class="shopCardListBox">
				<view class="listTitle">
					<view class="allChangeNum" @click="allState?allChangeNum(false):allChangeNum(true)">
						<image class="img" :src="imgUrl+'shopcart/configa.jpg'" v-if="allState" />
						<image class="img" :src="imgUrl+'shopcart/noConfiga.jpg'" v-else />
					</view>
					<view class="text">姚记潮品</view>
					<view class="btn" @click="gwcCloseBtnData">删除</view>
				</view>
				<view class="list" v-for="(item,index) in gwcList" :key='index'>
					<view class="dxChangeNum" @click="dxChangeNum(item)">
						<image class="img" :src="imgUrl+'shopcart/configa.jpg'" v-if="item.IsActive&&item.isKc" />
						<image class="img" :src="imgUrl+'shopcart/noConfiga.jpg'" v-if="!item.IsActive&&item.isKc" />
						<image class="img" :src="imgUrl+'shopcart/noConfig.jpg'" v-if="!item.isKc" />
					</view>
					<image class="commidityImg" :src="item.previewImg"></image>
					<view class="listDetails">
						<view class="name">{{item.goodsName}}</view>
						<view class="hint">
							<view class="hintList">{{item.specificationName}}</view>
						</view>
						<view class="priceBox">
							<view class="l">
								<view class="dw">¥</view>
								<view class="price">{{item.goodsPrice}}</view>
							</view>
							<view class="r">
								<view class="addList jian" @click="changeNum('jian',item)">
									<text class="cuIcon-move"></text>
								</view>
								<input class="text" type="number" v-model.trim="item.goodsNum"
									@blur="goodsNumChange(item)">
								<view class="addList jia">
									<text class="cuIcon-add" @click="changeNum('jia',item)"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部按钮 -->
		<view class="footerBtnBox">
			<view class="l">
				<view class="text">合计：</view>
				<view class="price">
					<view class="dw">¥</view>
					<view class="xj">{{qiuhe(endData)}}</view>
				</view>
			</view>
			<view class="r" @click="skipOrderPay">
				<view class="text">去结算</view>
				<view class="num" v-if="endData.length>0">({{endData.length}})</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: '',
				// 导航栏距离
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				imgUrl: this.$http.imgUrl + '/static/',

				// 购物车
				gwcList: [],

				// 购物车全选状态
				allState: false,

				// 最终商品
				endData: []
			};
		},
		created() {
			this.height = uni.getSystemInfoSync().windowHeight
		},
		onShow() {
			this.gwcListData()
		},
		methods: {
			// 购物车列表
			async gwcListData() {
				const url = this.api.shoppingCard.list
				const {
					data
				} = await this.$http.get(url)
				let arr = data.data
				if (arr.length > 0) {
					for (var i in arr) {
						arr[i].IsActive = false
						arr[i].isKc = true
						if (arr[i].stock < arr[i].goodsNum) {
							arr[i].isKc = false
						}
					}
				}
				if (this.gwcList.length != 0) {
					for (var i in this.gwcList) {
						for (var j in arr) {
							if (this.gwcList[i].shoppingCartId == arr[j].shoppingCartId) {
								arr[j].IsActive = this.gwcList[i].IsActive
							}
						}
					}
				}
				this.gwcList = arr
				this.allListData()
				console.log(arr, '购物车列表')
			},

			// 单选购物车
			dxChangeNum(item) {
				if (item.stock < item.goodsNum) return
				item.IsActive = !item.IsActive
				this.allListData()
			},
			// 全选购物车
			allChangeNum(state) {
				this.allState = state
				let arr = this.gwcList
				for (var i in arr) {
					arr[i].IsActive = state
				}
				this.allListData()
			},

			// 修改购物车数量
			changeNum(text, item) {
				if (item.goodsNum == 1 && text == 'jian') {
					uni.showModal({
						title: '提示',
						content: '是否移除当前商品',
						success: res => {
							if (res.confirm) {
								this.editGwcListData(text, item)
							} else if (res.cancel) {}
						}
					});
					return
				}
				this.editGwcListData(text, item)
			},

			// 修改购物车数量数据
			async editGwcListData(text, item) {
				let url = ''
				let obj = {
					goodsCode: item.goodsCode,
					goodsNum: item.goodsNum,
					specificationId: item.specificationId
				}
				if (text == 'jian') {
					url = this.api.shoppingCard.editjian
				}
				if (text == 'jia') {
					url = this.api.shoppingCard.editjia
				}
				let details = await this.$http.post(url, obj)
				if (details.data.code != 200) {
					uni.showToast({
						title: details.data.message,
						icon: 'none'
					});
					return
				}
				this.gwcListData()
			},

			// 输入改变
			goodsNumChange(item) {
				if (!item.goodsNum) {
					item.goodsNum = 1
				}
				this.editNumData(item)
			},

			// 输入改变数量
			async editNumData(item) {
				let url = this.api.shoppingCard.editNum
				let obj = {
					goodsNum: item.goodsNum,
					specificationId: item.specificationId,
				}
				let details = await this.$http.post(url, obj)
				if (details.data.code != 200) {
					uni.showToast({
						title: details.data.message,
						icon: 'none'
					});
				}
				this.gwcListData()
			},

			// 选中数据获取
			allListData() {
				if (this.gwcList.length == 0) {
					this.endData = []
					this.allState = false
					return
				}
				let endData = []
				let allState = true
				let arr = this.gwcList
				for (var i in arr) {
					if (arr[i].isKc && arr[i].IsActive) {
						endData.push(arr[i])
					}
					if (!arr[i].IsActive) {
						allState = false
					}
				}
				this.endData = endData
				this.allState = allState
			},

			// 求和
			qiuhe(arr) {
				let zPirce = 0
				if (arr.length > 0) {
					for (var i in arr) {
						zPirce += arr[i].totalPrice
					}
				}
				return zPirce
			},

			// 批量删除按钮
			gwcCloseBtnData() {
				let arr = this.endData
				if (this.endData.length == 0) {
					uni.showToast({
						title: '请选择需要移除的商品',
						icon: 'none'
					});
					return
				}
				var obj = {
					specificationIds: []
				}
				for (var i in arr) {
					obj.specificationIds.push(arr[i].specificationId)
				}
				uni.showModal({
					title: '提示',
					content: '是否移除选中的商品',
					success: res => {
						if (res.confirm) {
							this.gwcCloseData(obj)
						} else if (res.cancel) {}
					}
				});
			},
			// 批量删除数据
			async gwcCloseData(obj) {
				let url = this.api.shoppingCard.gwcClose
				let details = await this.$http.post(url, obj)
				if (details.data.code != 200) {
					uni.showToast({
						title: details.data.message,
						icon: 'none'
					});
				}
				this.gwcListData()
			},

			// 跳转下单
			skipOrderPay() {
				if (this.endData.length == 0) {
					uni.showToast({
						title: '请选择需要购买的商品',
						icon: 'none'
					});
					return
				}
				uni.navigateTo({
					url: './shoppingCardOrderPay?cartList=' + encodeURIComponent(JSON.stringify(this.endData)),
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		height: 100vh;
		background: #FAFAFA;
	}

	// 背景
	.bj {
		position: fixed;
		top: -4%;
		left: 0;
		width: 100%;
		height: 1204rpx;
		background-size: 100% 100%;
	}

	.container {
		width: 702rpx;
		margin: 0 auto;
		padding-top: 24rpx;
		// position: fixed;
		// left: 50%;
		// transform: translateX(-50%);
		padding-bottom: 128rpx;
	}

	// 购物车
	.shopCardListBox {
		width: 702rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(153, 153, 153, 0.12);
		border-radius: 24rpx;
		padding: 32rpx 24rpx;

		.listTitle {
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;
			
			.allChangeNum{
				padding-right: 24rpx;
			}

			.img {
				width: 32rpx;
				height: 32rpx;
			}

			.text {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				flex: 1;
			}

			.btn {
				width: 112rpx;
				height: 48rpx;
				border-radius: 26rpx;
				border: 2rpx solid rgba(153, 153, 153, 0.4);
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				text-align: center;
				line-height: 44rpx;
			}
		}

		.list {
			display: flex;
			align-items: center;
			margin-bottom: 56rpx;

			.dxChangeNum {
				// padding-right: 24rpx;
				padding: 24rpx 24rpx 24rpx 0;
			}

			.img {
				width: 32rpx;
				height: 32rpx;
			}

			.commidityImg {
				width: 180rpx;
				height: 180rpx;
				margin-right: 16rpx;
				border-radius: 10rpx;
			}

			.listDetails {
				height: 180rpx;
				display: flex;
				flex-direction: column;
				flex: 1;
				justify-content: space-around;
				overflow: hidden;

				.name {
					font-size: 28rpx;
					font-weight: 500;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}

				.hint {
					display: flex;
					align-items: center;

					.hintList {
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
						padding: 0 16rpx;
						height: 56rpx;
						background: rgba(153, 153, 153, 0.12);
						border-radius: 8rpx;
						line-height: 56rpx;
					}
				}

				.priceBox {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.l {
						display: flex;
						align-items: baseline;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FF5C46;

						.dw {
							font-size: 24rpx;
							margin-right: 10rpx;
						}

						.price {
							font-size: 32rpx;
						}
					}

					.r {
						display: flex;
						align-items: center;
						border: 1rpx solid #D7D7D7;
						border-radius: 10rpx;
						height: 48rpx;

						.addList {
							width: 44rpx;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;

							text {
								font-size: 30rpx;
							}
						}

						.jian {
							border-right: 1rpx solid #D7D7D7;

							text {
								font-size: 22rpx;
							}

						}

						.jia {
							border-left: 1rpx solid #D7D7D7;
						}

						.text {
							width: 84rpx;
							text-align: center;
							font-size: 24rpx;
							font-weight: 500;
							color: #333333;
						}
					}
				}
			}
		}

		.list:last-child {
			margin-bottom: 0;
		}
	}

	// 底部按钮
	.footerBtnBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		
		// align-items: center;
		height: 144rpx;
		background: #FFFFFF;
		justify-content: space-between;
		padding: 0 24rpx;
		padding-top: 16rpx;

		.l {
			display: flex;
			align-items: baseline;

			.text {
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}

			.price {
				font-weight: 600;
				color: #FF5C46;
				display: flex;
				align-items: baseline;

				.dw {
					font-size: 24rpx;
					margin-right: 10rpx;
				}

				.xj {
					font-size: 36rpx;
				}
			}
		}

		.r {
			width: 232rpx;
			height: 76rpx;
			background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
			border-radius: 38rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>